<template>
	<view class="bind_warp">
		<view class="b_w_t">请输入正确的资料信息</view>
		<view class="b_input_warp">
			<view class="b_input_warp_item f f_align_center">
				<view class="b_i_label">持卡人</view>
				<input v-model="certName" class="bold" type="text" value="" placeholder="请输入持卡人姓名" />
			</view>
			<view class="b_input_warp_item f f_align_center">
				<view class="b_i_label">银行卡</view>
				<input maxlength="25" v-model="bankcardNum" class="bold" type="number" value="" placeholder="请输入你的银行卡号账号" />
			</view>
			<view class="b_input_warp_item f f_align_center">
				<view class="b_i_label">开户银行</view>
				<input v-model="bankName" class="bold" type="text" value="" placeholder="请输入开户银行" />
			</view>
			<view class="b_input_warp_item tip f f_align_center">
				<i class="iconfont iconzu3932 mr10"></i>
				<view class="">
					信息加密处理，请放心填写
				</view>
			</view>
		</view>

		<view class="biding_btn bold" @click="addCards">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardType:'10014003',
				certName:'',
				bankName:'',
				bankcardNum:''
			};
		},
		methods:{
			//添加卡
			async addCards(){
				const _this = this;
				if(_this.certName == ''){
					return _this.$showToast('请输入持卡人到真实姓名～');
				}
				if(_this.bankcardNum == ''){
					return _this.$showToast('请输入银行卡卡号～');
				}
				if(_this.bankName == ''){
					return _this.$showToast('请输入银行卡开户行～');
				}
				let res = (await _this.$http('/api/auth/user/card/createUserCard','POST',{
					cardType:_this.cardType,
					certName:_this.certName,
					bankName:_this.bankName,
					bankcardNum:_this.bankcardNum
				})).data;

				if(res && res.code == '0'){
					_this.$showToast('新增银行卡成功～');
					_this.certName = '';
					_this.bankName = '';
					_this.bankcardNum = '';
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind_warp{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		border-top: solid 2rpx #E6E6E6;

		.b_w_t{
			padding: 24rpx;
			font-size: 24rpx;
			color: #B8B8B8;
		}
		.b_input_warp{
			padding: 0 24rpx;
			background-color: #fff;
			.b_input_warp_item{
				padding: 32rpx 0;
				font-size: 28rpx;
				color: #333;
				border-top: solid 2rpx #E6E6E6;
				.b_i_label{
					width: 150rpx;
				}
				&:first-child{
					border-top: none;
				}
				&.tip{
					font-size: 24rpx;
					color: #999999;
					padding: 24rpx 0;
				}
			}
		}
		.biding_btn{
			margin-top: 150rpx;
		}
	}
</style>
